<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>类别管理</el-breadcrumb-item>
        <el-breadcrumb-item>类别列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入类别名" clearable v-model="name" @clear="searchCtegory">
              <el-button slot="append" icon="el-icon-search" @click="searchCtegory"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="showAddDialog()">添加分类</el-button>
          </el-col>
        </el-row>
        <el-table :data="catelist" border stripe>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column prop="weight" label="权重" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.weight=='1'" style="color: red">热门</span>
              <span v-if="scope.row.weight=='0'" style="color: limegreen">普通</span>
            </template>
          </el-table-column>
          <el-table-column label="板块" prop="board.name"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="removeCateById(scope.row.id)">删除</el-button>
              <el-button type="success" size="mini" v-if="scope.row.weight == 0" @click="changeWeightById(scope.row.id,1)" >推荐热门</el-button>
              <el-button type="warning" size="mini" v-if="scope.row.weight == 1" @click="changeWeightById(scope.row.id,0)" >取消热门</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10 , 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
      </el-card>

      <!-- ===============修改菜单=====================================             -->
      <div>

        <el-dialog title="修改分类" :visible.sync="editCateFormVisible" @close="editCateFormVisible = false;this.$refs.editTagForm.resetFields()">
          <el-form ref="editTagForm" :rules="editCateRules" :model="editCate" label-width="80px" size="mini">
            <el-form-item label="名称" prop="name">
              <el-input v-model="editCate.name"></el-input>
            </el-form-item>
            <el-form-item label="权重" prop="weight">
              <el-radio v-model="editCate.weight" checked :label="1">推荐热门</el-radio>
              <el-radio v-model="editCate.weight" :label="0">取消热门</el-radio>
            </el-form-item>
            <el-form-item label="板块名称" prop="boardId">
              <el-select v-model="editCate.boardId" placeholder="请选择板块">
                <el-option  v-for="p in boardList" :label="p.name" :value="p.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="editCateFormVisible = false;this.$refs.editTagForm.resetFields()">取 消</el-button>
            <el-button type="primary" @click="modifyCate">确 定</el-button>
          </div>
        </el-dialog>

      </div>

      <div>
        <!--====================添加表单=================================        -->
        <el-dialog title="添加分类" :visible.sync="addCateFormVisible" @close="addCateFormVisible = false;this.$refs.insertTagForm.resetFields()">
          <el-form ref="insertTagForm" :rules="addCateRules" :model="addCate" label-width="80px" size="mini">
            <el-form-item label="名称" prop="name">
              <el-input v-model="addCate.name"></el-input>
            </el-form-item>
            <el-form-item label="权重" prop="weight">
              <el-radio v-model="addCate.weight" checked :label="1">热门</el-radio>
              <el-radio v-model="addCate.weight" :label="0">普通</el-radio>
            </el-form-item>
            <el-form-item label="板块名称" prop="boardId">
              <el-select v-model="addCate.boardId" placeholder="请选择板块">
                <el-option  v-for="p in boardList" :label="p.name" :value="p.id"></el-option>
              </el-select>
            </el-form-item>

          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="addCateFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertTag">确 定</el-button>
          </div>
        </el-dialog>


      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Category",
  data(){
    return {
      addCateFormVisible:false,
      editCateFormVisible:false,
      pageNum: 1,
      pageSize: 5,
      catelist: [],
      total: 0,
      name: "", //权限名称
      urlTypeDesc: "菜单权限",
      boardList:[],
      editCate:{
        id:0,
        name:'',
        isDelete:'',
        weight:'',
        createTime:'',
        boardId:'',

      },
      addCate:{
        id:0,
        name:'',
        isDelete:'',
        weight:0,
        createTime:'',
        boardId:'',
      },
      addCateRules:{
        name:[
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        weight:[
          {required: true, message: "权重不能为空", trigger: "change"}
        ],
        boardId:[{
          required: true, message: "板块不能为空", trigger: "change"
        }]
      },
      editCateRules:{
        name:[
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        weight:[
          {required: true, message: "权重不能为空", trigger: "change"}
        ],
        boardId:[{
          required: true, message: "板块不能为空", trigger: "change"
        }]
      }

    };

  },
  methods:{
    //根据Id修改权限
    changeWeightById(id,status){
      let url = "category/hotcate";
      this.$axios.get(url,{
        params:{
          id:id,
          status:status
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.reloadData();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },

    //确认修改
    modifyCate(){
      let url ="category/modify"
      this.$axios.post(url,this.editCate).then(res=>{
        if (res.data.code==200) {
          this.editCateFormVisible=false
          this.$refs.editTagForm.resetFields();
          this.reloadData()
        }else {
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })

    },

    //确认添加
    insertTag(){
      let url ="category/addCate"
      this.$axios.post(url,this.addCate).then(res=>{
        if (res.data.code==200) {
          this.addCateFormVisible=false
          this.$refs.insertTagForm.resetFields();
          this.reloadData()
        }else {
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })
    },


    handleSizeChange(size){
      this.pageSize=size;
      this.reloadData()

    },
    handleCurrentChange(now){
      this.pageNum=now;
      this.reloadData()

    },
    searchCtegory(){
      this.reloadData()

    },
    //弹出修改框
    showEditDialog(row){
      this.editCateFormVisible=true
      //通过双向绑定进行回显数据
      this.editCate=row
    },
    //弹出添加框
    showAddDialog(){
      this.addCateFormVisible=true

    },

    removeCateById(id) {
      let url = "category/delcatecory/" + id;
      this.$axios.delete(url).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000
          })
          this.reloadData()
        } else {
          this.$message({
            type: 'error',
            message: '删除失败',
            duration: 1000,
          })
        }
      })
    },


   /* //查询出父菜单
    reloadParentMenu(){
      let url ="permission/reloadParentMenu"
      this.$axios.get(url).then(res=>{
        if (res.data.code==200) {
          this.parentMenus=res.data.data;
        }else {
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })
    },*/

    //------查询所有板块信息----------------------------------
    initBoard(){
      let url = "board/showALLBoard";
      this.$axios.get(url).then(res=>{
        if(res.data.code == 200){
          this.boardList = res.data.data;
          console.log(this.boardList)
        }else{
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },




    reloadData(){
      let url ="category/categorylist"
      this.$axios.get(url,{
        params:{
          name:this.name,
          now:this.pageNum,
          size:this.pageSize,
        }
      }).then(res=>{
        if (res.data.code==200) {
          this.catelist=res.data.data.list;
          this.pageNum=res.data.data.pageNum;
          this.pageSize=res.data.data.pageSize;
          this.total=res.data.data.total
        }else {
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })
    }
  },
  created() {
    this.reloadData();
    /*this.reloadParentMenu()*/
    this.initBoard()
  }
}
</script>

<style scoped>

</style>